<script setup lang="ts">
import TopIcons from './components/TopIcons.vue';
import BottomIcons from './components/BottomIcons.vue';
</script>

<template>
  <div class="index-content">
    <!-- 头部导航 -->
    <div class="wrapper-content header-nav">
      <div class="header-left">
        <span class="logo" @click="$router.push('/index')">FileQX</span>
      </div>
      <div class="header-right">
        <ul class="nav-list">
          <router-link to="/contactUs">
            <li class="nav-item first-item">联系我们</li>
          </router-link>
          <router-link to="/login">
            <li class="nav-item">登入</li>
          </router-link>
          <router-link to="/register">
            <li class="nav-item last-item">报名</li>
          </router-link>
        </ul>
        <ul class="login-list">
          <router-link to="/login">
            <li class="nav-item">登入</li>
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="wrapper-content main-header">
      <div class="introduce-title">简单<span class="symbol">&</span>强大的网盘系统</div>
      <p class="introduce-text">
        您的私有云存储软件基于 Laravel 和 Vue.js开发独立部署。没有限制，没有月费。真正的自由。
      </p>
      <div class="register-box">
        <router-link to="/register">
          <button class="register-btn">
            <span class="register-text">立即注册</span>
            <svg
              data-v-0249f6ea=""
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather text-theme -mr-1 feather feather-chevron-right"
            >
              <polyline data-v-0249f6ea="" points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </router-link>
      </div>
    </div>
    <!-- 图片展示 -->
    <div class="page-wrapper hero-screenshot">
      <img class="hero-light" src="@/assets/vuefilemanager-screenshot-dark.png" alt="" />
      <TopIcons></TopIcons>
    </div>
    <!-- 网盘介绍 -->
    <div class="wrapper-content main-features">
      <div class="page-title">
        <h1 class="title">极速 <span class="text-theme">网盘系统</span></h1>
        <h2 class="description">
          您的私有云存储软件/网盘系统基于 Laravel 和 Vue.js开发并独立部署。没有限制，没有月费。真正的自由。
        </h2>
      </div>
      <div class="page-content">
        <div class="hero">
          <img class="hero-imgs" src="@/assets/hero-Illustration.svg" alt="Hero" />
        </div>
        <div class="features">
          <div class="feature">
            <div class="icon first-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-cloud"
              >
                <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
              </svg>
            </div>
            <h3 class="title">真正的自由</h3>
            <p class="description">您可以完全控制 FileQX网盘系统，没有第三方机构会控制您的服务或使用，只有您自己</p>
          </div>
          <div class="feature">
            <div class="icon two-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-user"
              >
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
            </div>
            <h3 class="title">极速安全的私有云存储</h3>
            <p class="description">FileQX 是独立部署云存储软件。您必须在自己的服务器托管上安装和运行应用程序。</p>
          </div>
          <div class="feature">
            <div class="icon three-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24px"
                height="24px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-hard-drive"
              >
                <line x1="22" y1="12" x2="2" y2="12"></line>
                <path
                  d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
                ></path>
                <line x1="6" y1="16" x2="6.01" y2="16"></line>
                <line x1="10" y1="16" x2="10.01" y2="16"></line>
              </svg>
            </div>
            <h3 class="title">没有任何额外使用费用</h3>
            <p class="description">
              当您在自己的服务器托管上运行 网盘系统 时，任何人都无法控制您的内容或转售您的用户数据。您的数据是安全的。
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 注册 -->
    <div class="page-wrapper get-started">
      <div class="page-title">
        <h1 class="title">准备好与我们一起<span class="text-theme">开始</span><br />了吗？</h1>
        <h2 class="description">
          您的私有云存储软件基于 Laravel 和 Vue.js开发。独立部署没有限制，没有月费。真正的自由。
        </h2>
      </div>
      <router-link to="/register">
        <button class="get-started-button bg-theme-800 hover-bg-theme shadow-theme">
          <span class="content">立即注册</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22px"
            height="22px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="feather feather-chevron-right"
          >
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      </router-link>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="790px"
        height="790px"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="cloud-bg svg-color-theme feather feather-cloud"
      >
        <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
      </svg>
      <BottomIcons></BottomIcons>
    </div>
    <!-- 底部 -->
    <div class="wrapper-content footer-nav">
      <div class="logo">
        <b class="logo-text">FileQX</b>
      </div>
      <ul class="navigation-links">
        <li><router-link to="/contactUs" class="hover-text-theme">联系我们</router-link></li>
      </ul>
      <ul class="navigation-links">
        <li>
          <router-link to="/termsService" class="hover-text-theme">Terms of Service</router-link>
        </li>
        <li>
          <router-link to="/privacyPolicy" class="hover-text-theme">Privacy Policy</router-link>
        </li>
        <li>
          <router-link to="/cookiePolicy" class="hover-text-theme">Cookie Policy</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/index.scss';
</style>
